<template>
  <el-container>
    <el-main>
      <el-form ref="form" :model="entityData" :label-width="formLabelWidth" :rules="rules" status-icon autocomplete="new-password">
        <el-form-item :label="$t('changePassword.account')" prop="account">
          <el-input v-model="entityData.account" disabled />
        </el-form-item>
        <el-form-item :label="$t('changePassword.oldPassword')" prop="oldPassword">
          <el-input v-model="entityData.oldPassword" show-password autocomplete="new-password" />
        </el-form-item>
        <el-form-item :label="$t('changePassword.newPassword')" prop="newPassword" class="form-item">
          <el-input v-model="entityData.newPassword" show-password />
        </el-form-item>
        <el-form-item :label="$t('changePassword.repeatPassword')" prop="newPasswordRepeat">
          <el-input v-model="entityData.newPasswordRepeat" show-password />
        </el-form-item>
      </el-form>
      <el-button style="float:right;margin-top:10px;" type="primary" @click="submitPwd()">{{ $t('changePassword.submit') }}</el-button>
    </el-main>
  </el-container>
</template>
<script>
import store from '@/store'
export default {
  data() {
    return {
      formLabelWidth: '100px',
      entityData: {
        account: this.$store.getters.account,
        oldPassword: '',
        newPassword: '',
        newPasswordRepeat: ''
      }
    }
  },
  computed: {
    rules() {
      const validatePassOld = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('changePassword.oldPasswordTip')))
        } else if (this.entityData.newPassword === '') {
          callback()
        } else {
          this.$refs.form.validateField('newPassword')
          callback()
        }
      }
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('changePassword.newPasswordRequiredTip')))
        } else if (this.entityData.newPasswordRepeat === '') {
          callback()
        } else {
          if (value === this.entityData.oldPassword) {
            callback(new Error(this.$t('changePassword.oldNewPasswordSameTip')))
          }
          this.$refs.form.validateField('newPasswordRepeat')
          callback()
        }
      }
      const validatePassRep = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('changePassword.repeatPasswordRequiredTip')))
        } else if (value !== this.entityData.newPassword) {
          callback(new Error(this.$t('changePassword.newRepeatPasswordSameTip')))
        } else {
          callback()
        }
      }
      return {
        oldPassword: [{ validator: validatePassOld, required: true, trigger: 'blur' }],
        newPassword: [{ validator: validatePass, required: true, trigger: 'blur' }],
        newPasswordRepeat: [{ validator: validatePassRep, required: true, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitPwd() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          const changeModel = {
            id: this.$store.getters.userId,
            oldPassword: this.entityData.oldPassword,
            newPassword: this.entityData.newPassword
          }
          this.$api.system.user.changePassword(this.$store.getters.userId, changeModel)
            .then(() => {
              store.dispatch('app/setShowChangePwdDialog', false)
              store.dispatch('app/setShowChangePwdClose', true)
              store.dispatch('user/setForceChangePassword', 'NO')
            })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.changePwd-container{
  margin: 0 0;
  .sign-btn {
    display: inline-block;
    cursor: pointer;
  };
  .form-item {
    background-color:white;
  }

}
</style>
